<template>
	<view>
		<!-- 搜索框 -->
		<view class="search">
			<image src="../../static/img/serach.png" mode=""></image>
			<input type="text" value="" placeholder="中文/简拼" v-model="clientname" @input="intFocus" />
		</view>
		<!-- 车站列表 -->
		<view class="citys" v-for="k in city" :key="k" v-if="list.length === 0">
			<view class="interval"></view>
			<view class="city">{{ k.city }}</view>
			<view @click="goDetailPage(item)" class="station" v-for="item in k.stationInfo" :key="item">
				{{ item.stationName }}
				<view class="right"><image style="width: 100%;height: 100%;" src="../../static/img/right.png" mode=""></image></view>
			</view>
		</view>
		<!-- 搜索后返回数据 -->
		<view class="citys" v-if="list.length != ''" style="margin-top: 20upx;">
			<view @click="goDetailPage(item)" class="station" :data-name="item.stationName" :data-code="item.globalcode" v-for="item in list" :key="item">
				{{ item.stationName }}
				<view class="right"><image src="../../static/img/right.png" mode=""></image></view>
			</view>
		</view>
		<!-- 加载中 -->
		<ourLoading isFullScreen text="加载中..." :active="active"></ourLoading>
	</view>
</template>

<script>
import utils from '@/static/common/utils.js';
import value from '@/static/value/value.js';
export default {
	data() {
		return {
			city: [],
			list: [],
			clientname: '',
			active: true
		};
	},
	components: {},
	onLoad() {
		this.getData();
	},
	methods: {
		getData() {
			const that = this;
			let dataReq = {
				ticks: utils.utils.GetTicks(),
				channel: this.$tokenObj.obj.channel
			};
			dataReq.sign = utils.utils.GetSign(dataReq);
			this.$http
				.request({
					url: '/BusInfo/GetStationInfo',
					method: 'get',
					data: dataReq
				})
				.then(res => {
					this.active = false;
					this.city = res.data.stationInfos;
					if (res.data.result === false) {
						uni.showModal({
							title: '提示',
							content: res.data.msg,
							success: function(res) {
								if (res.confirm) {
									uni.navigateBack({});
								} else if (res.cancel) {
								}
							}
						});
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 搜索功能
		intFocus(e) {
			var val = e.detail.value.toUpperCase();
			var depart = this.city;
			var cityRearch = [];
			if (val.length > 0) {
				for (var item in depart) {
					depart[item].show = true;
					for (var arr in depart[item].stationInfo) {
						if (depart[item].stationInfo[arr].stationName.indexOf(val) == 0 || depart[item].stationInfo[arr].pycode.indexOf(val) == 0) {
							depart[item].stationInfo[arr].show = true;
							cityRearch.push(depart[item].stationInfo[arr]);
						}
					}
				}
				this.list = cityRearch;
			} else {
				this.clientname = '';
			}
		},
		// 跳转到详情
		goDetailPage(e) {
			uni.navigateTo({
				url: `../detailPage/detailPage?id=${JSON.stringify(e)}`
			});
		}
	}
};
</script>

<style scoped>
/* 搜索框 */
.search {
	width: 96%;
	margin: auto;
	height: 65upx;
	display: flex;
	margin-top: 10upx;
	padding-left: 10upx;
	border: 1px solid #cccccc;
}
.search image {
	width: 40upx;
	height: 40upx;
	margin-top: 12upx;
}
.search input {
	width: 100%;
	color: #c0c0c0;
	margin-top: 10upx;
	font-size: 28upx;
	margin-left: 5upx;
}
/* 城市列表 */
.city {
	font-size: 40upx;
	margin-left: 7upx;
	line-height: 100upx;
}

.station {
	display: flex;
	color: #808080;
	font-size: 32upx;
	margin-left: 20upx;
	line-height: 85upx;
	border-top: 1px solid #ccc;
	justify-content: space-between;
}
.right {
	width: 40upx;
	height: 40upx;
	line-height: 90upx;
}
.right image {
	width: 100%;
	height: 100%;
}
.interval {
	width: 100%;
	height: 10upx;
	background-color: #f1f1f1;
}
</style>
